<script setup lang="ts">
import { onMounted } from '@vue/runtime-core'

onMounted(() => {})
</script>

<template>
  <div class="start"></div>
  <div class="stepContainer" style="top: 60px">
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
  </div>
  <div class="stepContainer" style="top: 154px; left: 78px">
    <div class="step red branch">炮2平5</div>
    <div class="step black">炮2平5</div>
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
  </div>
  <div class="stepContainer" style="top: 249px; left: 158px">
    <div class="step red branch">炮2平5</div>
    <div class="step black">炮2平5</div>
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
    <div class="step red">炮2平5</div>
    <div class="step black">炮2平5</div>
  </div>
</template>
<style scoped>
.start {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: rgb(0, 122, 200);
  margin-left: 52px;
  margin-top: 20px;
  cursor: pointer;
  position: relative;
}
.start:after {
  position: absolute;
  height: 18px;
  width: 2px;
  background: rgb(0, 122, 200);
  left: 50%;
  content: ' ';
  top: 16px;
}
.stepContainer {
  position: absolute;
  display: inline-block;
}

.red {
  background: red;
  color: #fff;
}
.black {
  background: #333;
  color: #fff;
}
.step {
  padding: 6px 8px;
  margin: 0px 0px 18px 32px;
  font-size: 13px;
  border-radius: 3px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
.step:after {
  position: absolute;
  height: 18px;
  background: rgb(0, 122, 200);
  width: 2px;
  left: 50%;
  content: ' ';
  top: 100%;
}
.branch:before {
  position: absolute;
  width: 22px;
  height: 2px;
  background: rgb(0, 122, 200);
  left: -22px;
  content: ' ';
  top: 50%;
}
.step:last-child:after {
  display: none;
}
</style>
